<!-- 文件路径: frontend/src/components/EChart.vue -->
<template>
    <v-chart class="chart" :option="option" autoresize />
  </template>
  
  <script>
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
  } from 'echarts/components';
  import VChart, { THEME_KEY } from 'vue-echarts';
  import { ref, defineComponent, provide, watch } from 'vue';
  
  // Manually register the necessary ECharts components
  use([
    CanvasRenderer,
    PieChart,
    BarChart,
    LineChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
  ]);
  
  export default defineComponent({
    name: 'EChart',
    components: {
      VChart,
    },
    props: {
      chartData: {
        type: Object,
        required: true,
      },
    },
    setup(props) {
      provide(THEME_KEY, 'light'); // Or 'dark'
  
      const option = ref({});
  
      // This function translates our AI's output into a valid ECharts option object
      const generateOption = (data) => {
        if (!data || !data.type) return {};
        
        const baseOption = {
          title: {
            text: data.title,
            left: 'center',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [],
        };
  
        if (data.type === 'pie_chart') {
          baseOption.tooltip.trigger = 'item';
          baseOption.series = [
            {
              name: data.title,
              type: 'pie',
              radius: '50%',
              data: data.data, // ECharts pie charts directly accept {name, value}
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ];
        } else if (data.type === 'bar_chart') {
          baseOption.xAxis = { type: 'category', data: data.data.map(item => item[data.x_axis]) };
          baseOption.yAxis = { type: 'value' };
          baseOption.series = [
            {
              data: data.data.map(item => item[data.y_axis]),
              type: 'bar',
            },
          ];
        } else if (data.type === 'line_chart' || data.type === 'multi_line_chart') {
          const firstRow = data.data[0];
          if (!firstRow) return {};
          const xKey = data.x_axis;
          const yKeys = Object.keys(firstRow).filter(k => k !== xKey);
          
          baseOption.xAxis = { type: 'category', data: data.data.map(item => item[xKey]) };
          baseOption.yAxis = { type: 'value' };
          baseOption.legend = { data: yKeys, top: 'bottom' };
          baseOption.series = yKeys.map(key => ({
            name: key,
            type: 'line',
            smooth: true,
            data: data.data.map(item => item[key]),
          }));
        }
  
        return baseOption;
      };
  
      watch(
        () => props.chartData,
        (newData) => {
          option.value = generateOption(newData);
        },
        { immediate: true, deep: true }
      );
  
      return { option };
    },
  });
  </script>
  
  <style scoped>
  .chart {
    height: 400px;
  }
  </style>